<template>
  <a-modal :open="open" width="1200px" title="出入库明细" destroy-on-close centered :footer="false" @cancel="onCancel">
    <SearchContainer @search="queryList" @reset="() => resetForm()">
      <a-form :model="formState" class="flex" name="validate_other">
        <a-form-item name="dateRange" label="操作日期" class="mr-3">
          <a-range-picker v-model:value="formState['dateRange']" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
        <!-- <a-form-item name="lsh" class="w-64">
          <a-input v-model:value="formState.lsh" placeholder="流水单号" />
        </a-form-item> -->
      </a-form>
    </SearchContainer>
    <BaseTable
      :loading="loading"
      column-code="000979"
      :pagination="{ total: page.total }"
      :data-source="tableData"
      bordered
      :scroll="{ x: 1400 }"
      height="500"
      @change="({ current, pageSize }) => queryList(current, pageSize)"
    >
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.dataIndex === 'xh'">
          <div>{{ index + 1 }}</div>
        </template>
        <template v-if="column.dataIndex === 'ypmc'">
          <MedicineInfo :value="{ mc: record?.ypmc, gg: record?.gg, cj: record?.cj }" />
        </template>
      </template>
      <template #summary>
        <a-table-summary fixed>
          <a-table-summary-row>
            <a-table-summary-cell />
            <a-table-summary-cell />
            <a-table-summary-cell />
            <a-table-summary-cell />
            <a-table-summary-cell>
              <a-typography-text>合计</a-typography-text>
            </a-table-summary-cell>
            <a-table-summary-cell class="text-left">
              <a-typography-text>{{ formatAmount(accountData.qysl) }}</a-typography-text>
            </a-table-summary-cell>
            <a-table-summary-cell />
            <a-table-summary-cell />
            <a-table-summary-cell />
            <a-table-summary-cell />
            <a-table-summary-cell />
            <a-table-summary-cell />
            <a-table-summary-cell />
          </a-table-summary-row>
        </a-table-summary>
      </template>
    </BaseTable>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import dayjs from 'dayjs'
import { post } from '@/utils/request'
import { formatAmount } from '@/utils/format.js'
// import { message } from 'ant-design-vue'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const loading = ref(false)
const tableData = ref([])
const accountData = ref({})

const formState = ref({
  dateRange: [dayjs().subtract(10, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  ck: [],
  djlb: [],
  zjm: ''
})
const page = ref({
  total: 0
})

const queryList = async (pageNum = 1, pageSize = 10) => {
  loading.value = true
  const { data, code, total } = await post('/materials/psiform/getLSDList', {
    stdate: formState.value.dateRange?.[0],
    eddate: formState.value.dateRange?.[1],
    zjm: formState.value.zjm,
    pageNum: pageNum,
    pageSize: pageSize,
    jklb: 'CRKMX'
  })
  loading.value = false
  if (code === 0) {
    tableData.value = data
    page.value.total = total
    getAccountData()
  }
}
const getAccountData = async () => {
  const { data, code } = await post('/materials/psiform/getLSDListHJ', {
    stdate: formState.value.dateRange?.[0],
    eddate: formState.value.dateRange?.[1],
    zjm: formState.value.zjm
  })
  loading.value = false
  if (code === 0) {
    accountData.value = data
  }
}
const resetForm = () => {
  formState.value = {
    dateRange: [dayjs().subtract(10, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
    ck: [],
    djlb: [],
    zjm: ''
  }
  // queryList()
}
const onCancel = () => {
  emit('update:open', false)
}
watch(
  () => props.open,
  (val) => {
    if (val) {
      if (props.rowData?.bh) {
        formState.value = { ...formState.value, zjm: props.rowData.bh, dateRange: props.rowData.dateRange }
        queryList()
      }
    }
  }
)
</script>
